<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('下拉框')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    .select-list li p {
        width: 20px !important;
    }

    .text {
        line-height: 34px;
        margin-bottom: 20px;
        white-space: nowrap;
        text-align: right;
    }

    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .panel-body {
        border: none !important;
    }

    .col-sm-6 {
        padding-left: 0px !important;
    }
</style>
<body class="">
<div class="row" style="padding: 10px;">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active tab-1"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 单项选择</a>
            </li>
            <li class="tab-2"><a data-toggle="tab" href="#tab-2" aria-expanded="false">多项选择</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <form id="radio">
                        <input type="hidden" name="companyId" th:value="${project.companyId}">
                        <input type="hidden" name="proId" th:value="${project.proId}">
                        <input type="hidden" name="buildingId" th:value="${project.buildingId}">
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">项目名称：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="proName" th:value="${project.proName}"
                                           class="form-control"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label text">项目名称：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="proName" th:value="${project.proName}"
                                           class="form-control"
                                           readonly="readonly">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">楼栋号：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="buildingName" th:value="${project.buildingName}"
                                           class="form-control" readonly="readonly">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label text">楼栋号：</label>
                                <div class="col-sm-9">
                                    <select name="buildingCopyId" class="form-control select2">
                                        <option th:each="building : ${building}" th:text="${building.name}"
                                                th:value="${building.buildingName}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">年月：</label>
                                <div class="col-sm-9">
                                    <select name="date" class="form-control select2">
                                        <option value="">请选择</option>
                                        <option th:each="date : ${date}" th:text="${date.date}"
                                                th:value="${date.date}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label text">年月：</label>
                                <div class="col-sm-5">
                                    <select name="year" id="year" class="form-control select2">
                                        <option value="">请选择</option>
                                        <option th:each="year : ${year}" th:text="${year.name+'年'}"
                                                th:value="${year.name}"></option>
                                    </select>
                                </div>
                                <div class="col-sm-1"></div>
                                <div class="col-sm-4">
                                    <select name="month" id="month" class="form-control select2"
                                            required>
                                        <option value="">请选择</option>
                                        <option th:each="month : ${month}" th:text="${month.name+'月'}"
                                                th:value="${month.name}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <form id="check">
                        <input type="hidden" name="companyId" th:value="${project.companyId}">
                        <input type="hidden" name="proId" th:value="${project.proId}">
                        <input type="hidden" name="buildingId" th:value="${project.buildingId}">
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">项目名称：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="proName" th:value="${project.proName}" class="form-control"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label text">项目名称：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="proName" th:value="${project.proName}" class="form-control"
                                           readonly="readonly">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">楼栋号：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="buildingName" th:value="${project.buildingName}"
                                           class="form-control" readonly="readonly">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-3 control-label text">楼栋号：</label>
                                <div class="col-sm-9">
                                    <select name="buildingCopyIds" class="form-control select2-multiple" multiple>
                                        <option th:each="building:${building}" th:value="${building.buildingName}"
                                                th:text="${building.name}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-sm-6_right">
                                <label class="col-sm-3 control-label text">年月：</label>
                                <div class="col-sm-9">
                                    <select name="dates" class="form-control select2-multiple" multiple>
                                        <option th:each="date:${date}" th:value="${date.date}"
                                                th:text="${date.date}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    var prefix = ctx + "costSummary";
    var active = 1;

    $(function () {
        $(".tab-1").click(function () {
            active = 1;
        })
        $(".tab-2").click(function () {
            active = 2;
        })
    })

    function submitHandler() {
        var data;
        if (active == 1) {//单项选择
            data = $("#radio").serializeArray();
            var date = $("select[name='date']").val();
            if (date == null) {
                $.modal.alertWarning('请选择年月！');
                return false
            }
        }
        if (active == 2) {//多项选择
            data = $("#check").serializeArray();
            var buildingCopyId = $("select[name='buildingCopyIds']").val();
            var date = $("select[name='dates']").val();
            data.push({"name": "buildingCopyId", "value": buildingCopyId});
            data.push({"name": "date", "value": date});
            if (buildingCopyId == null) {
                $.modal.alertWarning('请选择楼栋号！');
                return false
            }
        }
        $.operate.save(prefix + "/copy", data);
    }
</script>
</body>
</html>
